<!--
 * @Date: 2022-11-21 11:38:47
 * @LastEditTime: 2023-02-09 09:52:48
 * @Description: 首页
-->
<template>
  <view class="container">
    <!-- 头部导航栏 -->
    <view class="notice">
      <!-- 公告栏 -->
      <view class="announcement-bar">
        <view class="announcement-icon">
          <image src="/static/images/laba.png" mode="aspectFit"></image>
        </view>
        <view class="announcement-content">
          <text class="announcement-text">
            <rich-text :nodes="rules.editor || ''"></rich-text>
          </text>
        </view>
        <view class="announcement-btn">
          <text>公告</text>
        </view>
      </view>
    </view>

    <view class="header">
      <view class="header-left">
        <image src="/static/images/fx.png" alt="" />
      </view>
      <!-- <image class="text-logo" src="/static/images/login_header.png" alt="" /> -->
      <view class="header-right">
        <image src="/static/images/tz.png" alt="" />
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 主横幅广告 -->
      <view class="banner">
        <swiper class="swiper" circular autoplay interval="3000" duration="500" indicator-dots>
          <swiper-item v-for="(item, index) in swiperList" :key="index">
            <image class="swiper-image" :src="item.thumb" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 导航按钮 -->
      <view class="nav-buttons">
        <view class="nav-button" @tap="switchNavType(0)">
          <image :src="getNavImage(0)" mode="aspectFit" class="nav-icon"></image>
        </view>
        <view class="nav-button" @tap="switchNavType(2)">
          <image :src="getNavImage(2)" mode="aspectFit" class="nav-icon"></image>
        </view>
        <view class="nav-button" @tap="switchNavType(3)">
          <image :src="getNavImage(3)" mode="aspectFit" class="nav-icon"></image>
        </view>
        <view class="nav-button" @tap="switchNavType(1)">
          <image :src="getNavImage(1)" mode="aspectFit" class="nav-icon"></image>
        </view>
      </view>

      <view class="product-grid">
        <view class="product-item" v-for="(item, index) in products" :key="index" @click="toMallDetail(item)">
          <view class="product-image" :style="{ backgroundImage: 'url(' + item.thumb + ')' }"></view>
          <view class="product-info">
            <view class="product-title">{{ item.title }}</view>
            <view class="product-price">{{ item.price }}</view>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-status">
        <view v-if="isLoading" class="loading">加载中...</view>
        <view v-if="noMore" class="no-more">没有更多数据了</view>
      </view>

      <!-- 空状态 -->
      <view v-if="!isLoading && products.length === 0" class="empty-state">
        <image src="/static/images/empty.png" class="empty-icon" mode="aspectFit"></image>
        <view class="empty-text">暂无数据</view>
        <view class="empty-btn" @tap="resetPagination">重新加载</view>
      </view>
    </view>

    <!-- 自定义 TabBar -->
    <custom-tabbar :current="0" @change="handleTabChange"></custom-tabbar>
  </view>
</template>

<script>
import CustomTabbar from "@/components/custom-tabbar/custom-tabbar.vue";

export default {
  components: {
    CustomTabbar,
  },
  data() {
    return {
      rules: {},
      swiperList: [],
      products: [],
      page: 1,
      perPage: 10,
      isLoading: false,
      noMore: false,
      totalItems: 0,
      refreshing: false,
      activeNavType: 0,
      navImages: {
        0: { default: '/static/images/tj.png', active: '/static/images/tj_a.png' },
        2: { default: '/static/images/wx.png', active: '/static/images/wx_a.png' },
        1: { default: '/static/images/nd.png', active: '/static/images/nd_a.png' },
        3: { default: '/static/images/aaa.png', active: '/static/images/a-sss.png' },
      }
    };
  },

  created() {
    // Initialize the active state
    this.activeNavType = 0;
  },

  onShareAppMessage() {
    return {
      title: `开盲盒 赢好礼!`,
      // imageUrl: this.pageData.box.thumb,
      path: `/pages/index/index`,
    };
  },

  onLoad(options) {
    this.getNotice()
    this.getList();
    this.getSwiper();
  },

  onReady() {
    this.downCallback();
  },

  methods: {
    toMallDetail(item) {
      let toUrl = '';
      if (item.type == 1) {
        toUrl = '/package/index/a-reward'
      } else if (item.type == 2) {
        toUrl = '/package/index/un-reward'
      } else if (item.type == 3) {
        toUrl = '/package/index/nd-reward'
      }
      this.$common.to({
        url: toUrl,
        query: {
          id: item.id,
        },
      });
    },
    getSwiper() {
      this.$common.getBanner(1).then((res) => {
        this.swiperList = res;
        console.log(this.swiperList, "swiperList");
      });
    },
    downCallback() {
      // 初始化加载
      console.log("页面初始化完成");
    },

    // 重置分页数据
    resetPagination() {
      this.page = 1;
      this.products = [];
      this.noMore = false;
      this.getList();

      // 下拉刷新状态已在 getList 中处理
    },

    // 加载更多数据
    loadMore() {
      if (this.isLoading || this.noMore) return;
      this.page++;
      this.getList();
    },
    getNotice() {
      this.$common.getRule(1).then((res) => {
        this.rules = res;
      });
    },

    getList() {
      if (this.isLoading) return;

      this.isLoading = true;

      // Get API parameters based on active navigation type
      const params = this.getApiParams();

      this.req({
        url: "/v1/box/list",
        data: {
          ...params,
          page: this.page,
          per_page: this.perPage,
        },
        Loading: false, // 使用自定义loading状态
        success: (res) => {
          console.log(res)
          this.isLoading = false;
          if (res.code == 200) {
            const newItems = res.data.data || [];

            // 追加数据
            this.products = [...this.products, ...newItems];
            this.totalItems = res.data.total || 0;

            // 判断是否还有更多数据
            if (
              newItems.length < this.perPage ||
              this.products.length >= this.totalItems
            ) {
              this.noMore = true;
            }
          } else {
            // 请求成功但业务失败
            uni.showToast({
              title: res.message || "加载失败",
              icon: "none",
            });

            // 如果是第一页失败，可能需要显示空状态
            if (this.page === 1) {
              this.products = [];
            }
          }

          // 如果是下拉刷新，结束刷新状态
          this.refreshing = false;
        },
        fail: (err) => {
          this.isLoading = false;
          this.refreshing = false;

          // 网络请求失败
          uni.showToast({
            title: "网络请求失败，请检查网络",
            icon: "none",
          });

          console.error("网络请求失败:", err);
        },
      });
    },
    handleTabChange(index) {
      console.log("切换到标签:", index);
    },
    onRefresh() {
      this.refreshing = true;
      this.resetPagination();
    },

    // 切换导航类型
    switchNavType(type) {
      this.activeNavType = type;
      this.resetPagination();
    },

    // 获取接口type参数
    getTypeParam() {
      // activeNavType: 0-推荐, 1-新品, 2-热门, 3-专区
      // API type参数: 推荐不需要传特定值，新品=1, 热门=2, 专区=3
      return this.activeNavType === 0 ? "1" : String(this.activeNavType);
    },

    // 获取API参数
    getApiParams() {
      // 推荐: hot=1, type为空
      // 新品/热门/专区: hot为空, type有对应值
      if (this.activeNavType === 0) {
        return { hot: "1" };
      } else {
        return { type: String(this.activeNavType) };
      }
    },

    getNavImage(type) {
      const isActive = Number(this.activeNavType) === Number(type);
      return isActive ? this.navImages[type].active : this.navImages[type].default;
    },

  },
};
</script>

<style>
page {
  background-color: #efd9ad;
}

.container {
  min-height: 100vh;
  padding-top: calc(var(--status-bar-height) + 80rpx);
}

.notice {
  position: fixed;
  width: 100%;
  top: var(--status-bar-height);
  left: 0;
  z-index: 1000;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
  height: 522rpx;
  background-image: url("/static/images/hear_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.header-left,
.header-right {
  width: 93rpx;
  height: 107rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-bottom: 50rpx;

  img {
    width: 100%;
    height: 100%;
  }
}

.text-logo {
  width: 749rpx;
  height: 202rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.mascot {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.icon-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-text {
  color: white;
  font-size: 24rpx;
}

.content {
  margin-left: 20rpx;
  margin-right: 20rpx;
  position: relative;
  margin-top: -150rpx;
  z-index: 3;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  height: 100vh;
  /* Adjusted to account for header and padding */
  display: flex;
  flex-direction: column;
}

.banner {
  flex-shrink: 0;
  height: 340rpx;
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  padding: 20rpx;
  background-image: url("/static/images/swiper_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-image {
  width: 100%;
  height: 100%;
  border-radius: 25rpx;
}

.swiper-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.banner-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.banner-subtitle {
  font-size: 14px;
  color: #666;
}

.nav-buttons {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.nav-button {
  flex: 1;
  height: 100rpx;
  margin: 0 5px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.nav-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-button:first-child {
  margin-left: 0;
}

.nav-button:last-child {
  margin-right: 0;
}

.product-grid {
  padding: 0 0 40rpx 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -7.5px;
}

.product-item {
  width: calc(50% - 30rpx);
  margin: 0 7.5px 15px;
  background-color: #fff;
  border-radius: 10px;
  border: 3rpx solid #000;
  box-sizing: border-box;
  overflow: hidden;
}

.product-image {
  height: 150px;
  background-color: #eaeaea;
  /* 替代商品图片的颜色 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.product-info {
  padding: 10px;
}

.product-title {
  color: #333;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 28rpx;
  color: #000000;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.product-price {
  font-size: 16px;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
  line-height: 19rpx;
  font-style: normal;
  text-transform: none;
}



.loading-status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 400rpx;
}

.loading {
  color: #666;
}

.no-more {
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  margin-top: 100rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  color: #666;
  margin-bottom: 30rpx;
  font-size: 28rpx;
}

.empty-btn {
  background-color: #fa8c16;
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}

/* 公告栏样式 */
.announcement-bar {
  width: 710rpx;
  height: 64rpx;
  display: flex;
  margin: 0 auto;
  align-items: center;
  background-color: #fff8e1;
  border-radius: 16rpx;
  padding: 0 16rpx;
  border: 5rpx solid #000;
}

.announcement-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 15rpx;
}

.announcement-icon image {
  width: 100%;
  height: 100%;
}

.announcement-content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.announcement-text {
  font-size: 26rpx;
  color: #8c6e19;
  display: inline-block;
  animation: marquee 15s linear infinite;
}

.announcement-btn {
  width: 92rpx;
  height: 48rpx;
  background: #F25A56;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 4rpx solid #1D1D1D;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}
</style>
